<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好世界</title>
</head>
<body>
<!--
    1/引入vue.js
    2/创建vue对象
        el:指定根element(选择器)
        data:初始化数据(页面可以访问)
    3/双向数据绑定
    4/显示数据:{{xxx}}}
    5/理解vue的mvvm实现 model view viewModel
-->
<div id="app">
    <input type="text" v-model="username">
    <p>Hello {{ username }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /*创建vue对象*/
    const vm = new Vue({ /*配置对象*/
        el:'#app', /*element：选择器*/
        data:{ /*数据model view viewModel*/
            username:'Hello Vue!'
        }
    })
</script>
</body>
</html>